Technology Stack

**Referenced Files in This Document** - [package.json](file://package.json) - [.eleventy.js](file://.eleventy.js) - [worker.js](file://worker.js) - [wrangler.jsonc](file://wrangler.jsonc) - [cloudflare-pages.toml](file://cloudflare-pages.toml) - [tina/config.ts](file://tina/config.ts) - [src/admin/config.yml](file://src/admin/config.yml) - [src/assets/js/main.js](file://src/assets/js/main.js) - [src/assets/js/modules/search-functionality.js](file://src/assets/js/modules/search-functionality.js) - [src/assets/js/modules/carousel-system.js](file://src/assets/js/modules/carousel-system.js) - [src/_includes/layouts/base.njk](file://src/_includes/layouts/base.njk) - [src/_data/site.json](file://src/_data/site.json)

Table of Contents

  1. Introduction
  2. Project Structure
  3. Core Components
  4. Architecture Overview
  5. Detailed Component Analysis
  6. Dependency Analysis
  7. Performance Considerations
  8. Troubleshooting Guide
  9. Conclusion

Introduction

This document explains the complete technical foundation of Ace Strategies Prime. It covers the frontend stack (Eleventy static site generation, Nunjucks templating, and modern JavaScript modules), the backend architecture (Cloudflare Workers for serverless functions and authentication), the content management system (TinaCMS with schema-driven content models), and the deployment infrastructure (Cloudflare Workers for dynamic routes and Pages for static hosting). Supporting technologies include Pagefind for search, GSAP for animations, Three.js for 3D effects, and Sharp for image optimization. The rationale behind each choice and how components integrate is explained to help both technical and non-technical readers understand the platform’s capabilities.

Project Structure

Ace Strategies Prime is organized around a static site generator (Eleventy) with a modular frontend and a Cloudflare Workers runtime for dynamic functionality. TinaCMS powers content editing and schema-driven content models. The deployment pipeline builds static assets and serves them via Cloudflare Workers and Pages.

graph TB
subgraph "Static Site Generation"
ELE[".eleventy.js"]
DATA["_data/*"]
INCLUDES["_includes/*"]
CONTENT["src/content/*"]
ADMIN["src/admin/*"]
end
subgraph "Frontend Runtime"
BASE["layouts/base.njk"]
JSMAIN["assets/js/main.js"]
MODULES["assets/js/modules/*"]
end
subgraph "Dynamic Backend"
WRK["worker.js"]
WCFG["wrangler.jsonc"]
end
subgraph "CMS"
TCONFIG["tina/config.ts"]
ACONFIG["src/admin/config.yml"]
end
ELE --> DATA
ELE --> INCLUDES
ELE --> CONTENT
ELE --> ADMIN
BASE --> JSMAIN
JSMAIN --> MODULES
WRK --> BASE
WRK --> ELE
TCONFIG --> ACONFIG

Diagram sources

  • [.eleventy.js:1-283](file://.eleventy.js#L1-L283)
  • [src/_includes/layouts/base.njk:1-260](file://src/_includes/layouts/base.njk#L1-L260)
  • [src/assets/js/main.js:1-37](file://src/assets/js/main.js#L1-L37)
  • [worker.js:1-321](file://worker.js#L1-L321)
  • [wrangler.jsonc:1-35](file://wrangler.jsonc#L1-L35)
  • [tina/config.ts:1-331](file://tina/config.ts#L1-L331)
  • [src/admin/config.yml:1-774](file://src/admin/config.yml#L1-L774)

Section sources

  • [.eleventy.js:267-283](file://.eleventy.js#L267-L283)
  • [src/_includes/layouts/base.njk:1-260](file://src/_includes/layouts/base.njk#L1-L260)
  • [worker.js:299-321](file://worker.js#L299-L321)
  • [wrangler.jsonc:1-35](file://wrangler.jsonc#L1-L35)
  • [tina/config.ts:1-331](file://tina/config.ts#L1-L331)
  • [src/admin/config.yml:1-774](file://src/admin/config.yml#L1-L774)

Core Components

  • Static Site Generator and Templating: Eleventy orchestrates content, data, and includes into a static site. Nunjucks templates power layouts and reusable macros. Filters and transforms enrich content and optimize output.
  • Frontend Modules: A modular JavaScript entry initializes navigation, themes, carousels, search, and animation systems. Optional libraries (GSAP, Three.js) enhance interactivity and 3D experiences.
  • Dynamic Backend: Cloudflare Workers handle member authentication, magic-link login, logout, CORS preflight, GitHub OAuth for CMS, and a live polling API endpoint.
  • Content Management: TinaCMS defines content schemas for folders and JSON data files, enabling editors to manage content and site settings.
  • Deployment: Wrangler deploys the static site and dynamic routes to Cloudflare Workers; Pages remains as a legacy configuration.

Section sources

  • [.eleventy.js:1-283](file://.eleventy.js#L1-L283)
  • [src/assets/js/main.js:1-37](file://src/assets/js/main.js#L1-L37)
  • [worker.js:1-321](file://worker.js#L1-L321)
  • [tina/config.ts:1-331](file://tina/config.ts#L1-L331)
  • [src/admin/config.yml:1-774](file://src/admin/config.yml#L1-L774)
  • [wrangler.jsonc:1-35](file://wrangler.jsonc#L1-L35)

Architecture Overview

The platform separates concerns across static generation, dynamic routing, and content editing. Eleventy builds the site; Cloudflare Workers handles authentication and APIs; TinaCMS provides a schema-driven editing experience; Pagefind powers search; GSAP and Three.js enable animations and 3D effects; Sharp optimizes images.

graph TB
subgraph "Edge Runtime"
CF["Cloudflare Workers"]
AUTH["Member Auth<br/>Magic Link Login"]
OAUTH["GitHub OAuth<br/>CMS Integration"]
POLL["Live Polling API"]
end
subgraph "Static Build"
ELE["Eleventy"]
NJK["Nunjucks Templates"]
DATA["_data/*"]
INC["_includes/*"]
end
subgraph "Frontend"
LAYOUT["Layouts & Macros"]
JS["Modules & Entry"]
PF["Pagefind Search"]
GSAP["GSAP Animations"]
THREE["Three.js 3D"]
end
subgraph "CMS"
TCFG["Tina Config"]
ACMS["Admin Config"]
end
ELE --> NJK
ELE --> DATA
ELE --> INC
CF --> AUTH
CF --> OAUTH
CF --> POLL
NJK --> LAYOUT
LAYOUT --> JS
JS --> PF
JS --> GSAP
JS --> THREE
TCFG --> ACMS

Diagram sources

  • [worker.js:1-321](file://worker.js#L1-L321)
  • [.eleventy.js:1-283](file://.eleventy.js#L1-L283)
  • [src/_includes/layouts/base.njk:1-260](file://src/_includes/layouts/base.njk#L1-L260)
  • [src/assets/js/main.js:1-37](file://src/assets/js/main.js#L1-L37)
  • [src/assets/js/modules/search-functionality.js:1-179](file://src/assets/js/modules/search-functionality.js#L1-L179)
  • [tina/config.ts:1-331](file://tina/config.ts#L1-L331)
  • [src/admin/config.yml:1-774](file://src/admin/config.yml#L1-L774)

Detailed Component Analysis

Static Site Generation and Templating (Eleventy + Nunjucks)

  • Passthrough copying and watch targets ensure assets, admin, and redirects are preserved during development and build.
  • Shortcodes and filters provide reusable logic for dates, slugs, truncation, reading time, sorting, and transformations.
  • Collections organize content by type and metadata, enabling dynamic listings and paginated views.
  • Transforms include Obsidian-style wiki links and callouts, plus optional HTML minification in production.
  • Template formats include Nunjucks, Markdown, and HTML; directory mapping aligns input, output, includes, data, and layouts.
flowchart TD
Start(["Eleventy Build"]) --> Copy["Passthrough Copy<br/>Assets/Admin/Redirects"]
Copy --> Watch["Watch Targets<br/>CSS/JS/Data"]
Watch --> Shortcodes["Shortcodes<br/>Year, Date"]
Shortcodes --> Filters["Filters<br/>Date, Slug, Truncate,<br/>Reading Time, Sort, Where"]
Filters --> Collections["Collections<br/>News, Cases, Team, Services, Knowledge"]
Collections --> Transforms["Transforms<br/>Obsidian WikiLinks/Callouts"]
Transforms --> Minify{"Production?"}
Minify --> |Yes| HtmlMin["HTML Minify"]
Minify --> |No| SkipMin["Skip Minify"]
HtmlMin --> Output(["_site"])
SkipMin --> Output

Diagram sources

  • [.eleventy.js:1-283](file://.eleventy.js#L1-L283)

Section sources

  • [.eleventy.js:1-283](file://.eleventy.js#L1-L283)

Frontend Module System and Interactions

  • Entry module initializes navigation, theme toggles, carousels, accordions, search, and animation systems.
  • Conditional loading ensures animations run only when GSAP is present; Three.js is preloaded on the homepage.
  • Search integrates Pagefind asynchronously, debounced input, keyboard navigation, and categorized results.
  • Carousel system computes snap points, responsive pagination dots, keyboard and drag interactions, and accessibility attributes.
sequenceDiagram
participant DOM as "DOM Ready"
participant Main as "main.js"
participant Nav as "navigation.js"
participant Theme as "theme-toggling.js"
participant Cursor as "custom-cursor.js"
participant Hero as "hero-animations.js"
participant Car as "carousel-system.js"
participant Search as "search-functionality.js"
DOM->>Main : Event listener
Main->>Nav : initNavigation()
Main->>Theme : initThemeToggling()
Main->>Car : initCarousels()
Main->>Search : initSearch()
alt GSAP available
Main->>Cursor : initCustomCursor()
Main->>Hero : initHeroAnimations()
Main->>Hero : initScrollReveals()
else GSAP missing
Main-->>Main : Warn and continue core features
end

Diagram sources

  • [src/assets/js/main.js:1-37](file://src/assets/js/main.js#L1-L37)
  • [src/assets/js/modules/search-functionality.js:1-179](file://src/assets/js/modules/search-functionality.js#L1-L179)
  • [src/assets/js/modules/carousel-system.js:1-169](file://src/assets/js/modules/carousel-system.js#L1-L169)
  • [src/_includes/layouts/base.njk:28-30](file://src/_includes/layouts/base.njk#L28-L30)

Section sources

  • [src/assets/js/main.js:1-37](file://src/assets/js/main.js#L1-L37)
  • [src/assets/js/modules/search-functionality.js:1-179](file://src/assets/js/modules/search-functionality.js#L1-L179)
  • [src/assets/js/modules/carousel-system.js:1-169](file://src/assets/js/modules/carousel-system.js#L1-L169)
  • [src/_includes/layouts/base.njk:1-260](file://src/_includes/layouts/base.njk#L1-L260)

Cloudflare Workers: Authentication, OAuth, and APIs

  • Member authentication uses signed session cookies and one-time magic-link tokens stored in KV namespaces. Login issues magic links via Resend; verification sets a secure session cookie.
  • Logout clears the session cookie. CORS preflight supports cross-origin requests for OAuth.
  • GitHub OAuth enables Sveltia CMS login with provider handshake and token relay.
  • Live polling API reads Google Sheets values and returns cached JSON with appropriate caching headers.
sequenceDiagram
participant U as "User"
participant W as "worker.js"
participant KV as "KV Namespaces"
participant R as "Resend API"
participant GH as "GitHub OAuth"
U->>W : POST /alliance/login/
W->>KV : Lookup approved email
alt Approved
W->>R : Send magic link email
R-->>W : OK
else Not approved
W-->>U : Continue (same response)
end
U->>W : GET /alliance/verify/?token=...
W->>KV : Get token -> email
alt Valid
W->>KV : Delete token
W-->>U : 302 to /alliance/members/ with session cookie
else Expired/Invalid
W-->>U : Redirect to login with error
end
U->>W : GET /api/auth
W-->>U : 302 to GitHub authorize
U->>W : GET /api/auth/callback
W->>GH : Exchange code for access token
GH-->>W : Token
W-->>U : HTML with token posted to opener
U->>W : GET /api/polling.json?state=...
W-->>U : JSON with cached data and headers

Diagram sources

  • [worker.js:1-321](file://worker.js#L1-L321)

Section sources

  • [worker.js:1-321](file://worker.js#L1-L321)
  • [wrangler.jsonc:1-35](file://wrangler.jsonc#L1-L35)

Content Management System (TinaCMS)

  • Tina config defines collections for folder-based Markdown content (news, cases, team, knowledge, newsletters) and file-based JSON content (site settings, homepages, pages, services, resources).
  • Field types include strings, datetimes, booleans, images, rich text, and lists, enabling flexible content modeling.
  • Admin YAML config mirrors Tina’s schema for GitHub-backed editing, specifying widgets and fields per collection.
classDiagram
class TinaConfig {
+clientId
+branch
+token
+build.outputFolder
+media.tina.mediaRoot
+schema.collections[]
}
class Collection {
+name
+label
+path
+format
+fields[]
}
class Field {
+type
+name
+label
+required
+ui.component
+options[]
+list
+isTitle
+isBody
}
TinaConfig --> Collection : "defines"
Collection --> Field : "contains"

Diagram sources

  • [tina/config.ts:1-331](file://tina/config.ts#L1-L331)
  • [src/admin/config.yml:1-774](file://src/admin/config.yml#L1-L774)

Section sources

  • [tina/config.ts:1-331](file://tina/config.ts#L1-L331)
  • [src/admin/config.yml:1-774](file://src/admin/config.yml#L1-L774)

Search Infrastructure (Pagefind)

  • Search is initialized on demand, dynamically importing Pagefind to avoid blocking the main thread.
  • Debounced input triggers search, rendering up to ten results with category icons and excerpts.
  • Keyboard shortcuts support navigating and selecting results; Escape closes the modal.
flowchart TD
Open["Open Search Modal"] --> LoadPF["Load Pagefind Dynamically"]
LoadPF --> Input["User Types"]
Input --> Debounce["Debounce 200ms"]
Debounce --> Query{"Query >= 2 chars?"}
Query --> |No| Placeholder["Show Placeholder"]
Query --> |Yes| PFSearch["Pagefind.search(query)"]
PFSearch --> Results{"Results Found?"}
Results --> |No| NoResults["Show 'No results'"]
Results --> |Yes| Render["Render Up to 10 Results"]
Render --> Select["Keyboard Navigation & Selection"]
NoResults --> Close["Close on Escape"]
Placeholder --> Close

Diagram sources

  • [src/assets/js/modules/search-functionality.js:1-179](file://src/assets/js/modules/search-functionality.js#L1-L179)

Section sources

  • [src/assets/js/modules/search-functionality.js:1-179](file://src/assets/js/modules/search-functionality.js#L1-L179)

Animation and 3D Effects (GSAP and Three.js)

  • GSAP is conditionally loaded and registered with ScrollTrigger for scroll-driven animations.
  • Three.js is preloaded on the homepage to support scroll-driven terrain visuals.
  • The base layout injects CDN scripts and schema.org metadata for SEO.

Section sources

  • [src/_includes/layouts/base.njk:28-30](file://src/_includes/layouts/base.njk#L28-L30)
  • [src/_includes/layouts/base.njk:31-61](file://src/_includes/layouts/base.njk#L31-L61)
  • [src/assets/js/main.js:28-36](file://src/assets/js/main.js#L28-L36)

Image Optimization (Sharp)

  • Sharp is included as a dependency for image processing during builds, enabling optimized asset generation and serving.

Section sources

  • [package.json:14-20](file://package.json#L14-L20)

Deployment Infrastructure

  • Wrangler config binds the Worker script, exposes static assets via an ASSETS binding, and documents KV namespaces and secrets for member auth and OAuth.
  • Legacy Pages configuration remains for reference; canonical deployment is via Workers Assets.

Section sources

  • [wrangler.jsonc:1-35](file://wrangler.jsonc#L1-L35)
  • [cloudflare-pages.toml:1-17](file://cloudflare-pages.toml#L1-L17)

Dependency Analysis

The platform’s dependencies are scoped to build, runtime, and deployment needs. Eleventy orchestrates content; Cloudflare Workers provide authentication and APIs; TinaCMS manages content schemas; Pagefind, GSAP, and Three.js enhance UX; Sharp optimizes images.

graph LR
Pkg["package.json"]
Ele["Eleventy"]
Tin["TinaCMS"]
Pg["Pagefind"]
GS["GSAP"]
TH["Three.js"]
Sh["Sharp"]
Wrk["Worker.js"]
Wcfg["wrangler.jsonc"]
Pkg --> Ele
Pkg --> Tin
Pkg --> Pg
Pkg --> Sh
Wrk --> GS
Wrk --> TH
Wcfg --> Wrk
Ele --> Tin
Tin --> Pg

Diagram sources

  • [package.json:1-32](file://package.json#L1-L32)
  • [worker.js:1-321](file://worker.js#L1-L321)
  • [wrangler.jsonc:1-35](file://wrangler.jsonc#L1-L35)

Section sources

  • [package.json:1-32](file://package.json#L1-L32)
  • [worker.js:1-321](file://worker.js#L1-L321)
  • [wrangler.jsonc:1-35](file://wrangler.jsonc#L1-L35)

Performance Considerations

  • Static-first architecture reduces server costs and improves speed; Cloudflare’s edge network accelerates global delivery.
  • Eleventy minifies HTML in production and uses efficient Nunjucks rendering.
  • Pagefind search is lazy-loaded and debounced to minimize impact on initial load.
  • GSAP and Three.js are conditionally loaded to preserve core functionality when assets are unavailable.
  • KV-backed magic-link tokens expire after five minutes; session cookies persist for 30 days.
  • Image optimization via Sharp reduces payload sizes; CDN-hosted fonts and assets improve caching.

Troubleshooting Guide

  • Member authentication errors:
    • Verify KV namespaces are created and bound in Wrangler configuration.
    • Confirm secrets (session, resend, GitHub OAuth) are set via Wrangler.
    • Ensure the correct origin is used for OAuth callbacks.
  • Search not working:
    • Confirm Pagefind is built and served under the expected path.
    • Check browser console for dynamic import errors.
  • Animations missing:
    • Ensure GSAP and ScrollTrigger are loaded; verify conditional initialization logic.
  • Live polling API failures:
    • Validate Google Sheets ID and API key environment variables.
    • Confirm cache-control headers and CORS policies.

Section sources

  • [worker.js:70-75](file://worker.js#L70-L75)
  • [worker.js:193-227](file://worker.js#L193-L227)
  • [worker.js:233-276](file://worker.js#L233-L276)
  • [src/assets/js/modules/search-functionality.js:18-28](file://src/assets/js/modules/search-functionality.js#L18-L28)
  • [src/assets/js/main.js:28-36](file://src/assets/js/main.js#L28-L36)

Conclusion

Ace Strategies Prime combines a fast, maintainable static site with robust serverless capabilities for authentication and APIs, a schema-driven CMS for content management, and modern frontend libraries for engaging user experiences. The architecture prioritizes performance, scalability, and developer ergonomics while delivering a cohesive platform for marketing, storytelling, and member engagement.